<template>
  <view class="container">
    <!-- 内容主体区域 -->
    <view class="main-content">
      <view class="badge-dot"></view>
      <view class="badge-dot orange"></view>
      <view class="badge-dot green"></view>
      <view class="badge-dot cyan"></view>
      <view class="badge-dot blue"></view>
      <view class="badge-dot black"></view>
      <view class="badge-dot gray"></view>
      <view class="field-title">
        <text>安全设置</text>
      </view>
      <form @submit="onSubmit">
        <input type="hidden" v-model="stuid" value="">
        <view class="form-item">
          <label>原密码</label>
          <input type="password" v-model="oldPassword" :class="{ 'error': oldPasswordError }" placeholder="请输入密码" />
          <view v-if="oldPasswordError" class="error-tip">{{ oldPasswordError }}</view>
        </view>
        <view class="form-item">
          <label>新密码</label>
          <input type="password" v-model="newPassword" :class="{ 'error': newPasswordError }" placeholder="请输入密码" />
          <view v-if="newPasswordError" class="error-tip">{{ newPasswordError }}</view>
        </view>
        <view class="form-item">
          <button type="primary" @click="saveChanges">保存</button>
        </view>
      </form>
    </view>

    <!-- 底部区域 -->
    <view class="footer">
      <text>© - 联系校事达官方客服：6666666</text>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';

// 头部相关数据
const logoSrc = '/static/xsd.png';
const userImgSrc = '/static/images/user01.jpg';
const username = '小灰';

// 侧边栏菜单显示状态
const subMenus = ref({
  home: false,
  task: false,
  profile: false,
  chat: false,
  friends: false
});

// 用户信息
const stuid = ref('');
const oldPassword = ref('');
const newPassword = ref('');

// 表单验证错误信息
const oldPasswordError = ref('');
const newPasswordError = ref('');

// 按钮禁用状态
const isDisabled = computed(() => {
  return oldPasswordError.value || newPasswordError.value;
});

// 切换侧边栏子菜单
const toggleSubMenu = (menuKey) => {
  subMenus.value[menuKey] =!subMenus.value[menuKey];
};

// 显示私聊
const showPrivate = (value) => {
  uni.navigateTo({
    url: `/pages/userTalk/userTalk?username=${value}`
  });
};

// 表单提交
const onSubmit = (e) => {
  e.preventDefault();
  saveChanges();
};

// 保存修改
const saveChanges = () => {
  let isValid = true;
  const passwordReg = /^.{6,12}$/;
  if (!passwordReg.test(oldPassword.value)) {
    oldPasswordError.value = '原密码必须6到12位';
    isValid = false;
  } else {
    oldPasswordError.value = '';
  }
  if (!passwordReg.test(newPassword.value)) {
    newPasswordError.value = '新密码必须6到12位';
    isValid = false;
  } else {
    newPasswordError.value = '';
  }
  if (isValid) {
    // 这里可以添加保存到后端的逻辑，例如使用uni.request
    console.log('保存成功', {
      stuid: stuid.value,
      oldPassword: oldPassword.value,
      newPassword: newPassword.value
    });
    uni.navigateTo({
      url: "/pages/login/login"
    })
  }
};
</script>

<style scoped>
/* 全局样式 */
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* 头部样式 */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.logo {
  width: 100px;
}

.logo image {
  width: 100%;
  height: 100%;
}

.nav-left navigator,
.nav-right navigator {
  margin: 0 10px;
  color: #333;
  text-decoration: none;
}

.user-dropdown {
  position: relative;
  cursor: pointer;
}

.user-img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #fff;
  min-width: 120px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.user-dropdown:hover.dropdown-content,
.dropdown-content.active {
  display: block;
}

.dropdown-content navigator {
  display: block;
  padding: 10px;
  color: #333;
  text-decoration: none;
}

/* 侧边栏样式 */
.sidebar {
  width: 200px;
  background-color: #333;
  color: #fff;
}

.sidebar-scroll {
  overflow-y: auto;
  max-height: calc(100vh - 60px);
}

.nav-item {
  padding: 10px 20px;
  cursor: pointer;
}

.sub-menu {
  display: none;
  padding-left: 20px;
}

.nav-item.active.sub-menu {
  display: block;
}

/* 内容主体样式 */
.main-content {
  flex: 1;
  padding: 20px;
}

.title-section {
  margin-bottom: 20px;
}

.badge-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 5px;
}

.badge-dot.orange {
  background-color: orange;
}

.badge-dot.green {
  background-color: green;
}

.badge-dot.cyan {
  background-color: cyan;
}

.badge-dot.blue {
  background-color: blue;
}

.badge-dot.black {
  background-color: black;
}

.badge-dot.gray {
  background-color: gray;
}

.field-title {
  margin-top: 10px;
  margin-bottom: 30px;
  font-weight: bold;
}

.form-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 20px;
}

.form-item label {
  width: 100px;
  margin-right: 10px;
}

.form-item input {
  width: 200px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.form-item input.error {
  border-color: red;
}

.error-tip {
  color: red;
  font-size: 12px;
}

/* 底部样式 */
.footer {
  text-align: center;
  padding: 20px;
  background-color: #f8f8f8;
}
</style>
